<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="pagerInfo.param.name"
        placeholder="姓名"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
      />
      <el-input
        v-model="pagerInfo.param.mobile"
        placeholder="手机号"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
      />
      <el-select
        v-if="isSystemAdmin"
        v-model="pagerInfo.param.userTypesList"
        multiple
        filterable
        style="width: 200px; margin-right: 10px; margin-top: -10px"
        placeholder="用户类型"
      >
        <el-option
          v-for="(item, index) in userTypesList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="pagerInfo.param.roleIds"
        multiple
        filterable
        style="width: 200px; margin-right: 10px; margin-top: -10px"
        placeholder="所属角色"
      >
        <el-option
          v-for="(item, index) in rolesList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <el-button class="filter-item" type="primary" @click="handleReset">
        重置
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        @click="handleSearch({current: 1})"
      >查询</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        @click="handleAddVisible"
      >新增</el-button>
    </div>
    <el-table
      v-loading="pagerInfo.loading"
      :data="pagerInfo.result.records"
      border
      stripe
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" align="center" width="50" />

      <el-table-column label="姓名" min-width="110px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ userTypesMap.get(row.type).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户状态" min-width="150px" align="center">
        <template slot-scope="{ row }">
          {{ row.status == 'ACTIVE'?'激活':'锁定' }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
          <el-button v-if="row.status === 'ACTIVE'" type="primary" size="mini" @click="handleUpdateStatus(row, 'FROZEN')">锁定</el-button>
          <el-button v-if="row.status === 'FROZEN'" type="primary" size="mini" @click="handleUpdateStatus(row, 'ACTIVE')">激活</el-button>
          <el-button v-if="row.account !== 'admin'" size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pagerInfo.result.total > 0"
      :total="pagerInfo.result.total"
      :page.sync="pagerInfo.param.current"
      :limit.sync="pagerInfo.param.size"
      @pagination="handleSearch"
    />
    <userAdd v-if="addVisible" :visible="addVisible" :user-types-map="userTypesMap" :roles-list="rolesList" :user-types-list="userTypesList" @handleClose="handleAddVisible" @handleSuccess="handleSearch" />
    <userEdit v-if="editVisible" :visible="editVisible" :user-types-map="userTypesMap" :roles-list="rolesList" :selected-row="selectedRow" :user-types-list="userTypesList" @handleClose="handleEditVisible" @handleSuccess="handleSearch" />
  </div>
</template>
<script>
import {
  searchUser,
  updateUserStatus,
  deleteUsers
} from '@/api/iam/iamUser'
import { isSystemAdmin, isOrgUser } from '@/utils/permission'
import userAdd from './userAdd'
import userEdit from './userEdit'
import {
  roleSelector
} from '@/api/iam/iamRole'
import Pagination from '@/components/Pagination'
import * as R from 'ramda'
export default {
  components: { Pagination, userAdd, userEdit },
  data() {
    const defPagerParam = {
      current: 1,
      size: 20,
      name: undefined,
      userTypesList: []
    }
    const isSystemAdminConst = isSystemAdmin()
    const isOrgUserConst = isOrgUser()
    /** user type**/
    const userTypesList = [
      { id: 'SYSTEM_USER', name: '系统管理员', accessLevel: 'SYSTEM_USER', canCreateFromHere: isSystemAdminConst },
      { id: 'TENANT_USER', name: '代理商管理员', accessLevel: 'TENANT_USER', canCreateFromHere: false },
      { id: 'ORG_USER', name: '企业(组织)用户', accessLevel: 'ORG_USER', canCreateFromHere: isOrgUserConst },
      { id: 'DRIVER_MASTER_USER', name: '车队长', accessLevel: 'INDIVIDUAL_USER', canCreateFromHere: false },
      { id: 'DRIVER_USER', name: '司机用户', accessLevel: 'INDIVIDUAL_USER', canCreateFromHere: false }
    ]
    const userTypesMap = new Map()
    R.forEach(e => userTypesMap.set(e.id, e), userTypesList)
    /** other? **/
    return {
      defPagerParam: defPagerParam,
      pagerInfo: {
        loading: false,
        param: R.clone(defPagerParam),
        result: {
          total: 0
        }
      },
      addVisible: false,
      editVisible: false,
      rolesList: [],
      selectedRow: {},
      isSystemAdmin: isSystemAdmin(),
      userTypesList: userTypesList,
      userTypesMap: userTypesMap
    }
  },
  created() {
    this.handleSearch()
    roleSelector().then((response) => {
      this.rolesList = response
    })
  },
  methods: {
    handleUpdateStatus(row, toStatus) {
      const data = {
        id: row.id,
        status: toStatus
      }
      updateUserStatus(data).then((response) => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handleSearch()
      })
    },
    handleAddVisible() {
      this.addVisible = !this.addVisible
    },
    handleEditVisible() {
      this.editVisible = !this.editVisible
    },
    handleReset() {
      this.pagerInfo.param = R.clone(this.defPagerParam)
    },
    handleSearch(param = {}) {
      this.pagerInfo.loading = true
      searchUser(R.mergeLeft(param, this.pagerInfo.param)).then((response) => {
        this.pagerInfo.result = response
        this.pagerInfo.loading = false
      })
    },
    handleDelete(row) {
      deleteUsers([row.id]).then(() => {
        this.$notify.success('删除成功')
        this.handleSearch()
      })
    },
    // 编辑 人员
    handleEdit(row) {
      this.handleEditVisible()
      this.selectedRow = row
    }
  }
}
</script>
<style>
.filter-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.align-items {
  margin-bottom: 0;
}
</style>
